<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.zyslide.css"/>
	</head>
	<body>
		<!--第一个轮播图-->
		<div class="slide zy-slide">
			<section class="zy-prev">前一张</section>
			<section class="zy-next">后一张</section>
			<ul>
				<li><img src="images/1.jpg" alt="轮播图片" /></li>
				<li><img src="images/2.jpg" alt="轮播图片" /></li>
				<li><img src="images/3.jpg" alt="轮播图片" /></li>
				<li><img src="images/4.jpg" alt="轮播图片" /></li>
				<li><img src="images/5.jpg" alt="轮播图片" /></li>
				<li><img src="images/6.jpg" alt="轮播图片" /></li>
				<li><img src="images/7.jpg" alt="轮播图片" /></li>
			</ul>
		</div>
		
		<!--第二个轮播图-->
		<div class="slide zy-slide">
			<section class="zy-prev">前一张</section>
			<section class="zy-next">后一张</section>
			<ul>
				<li><img src="images/1.jpg" alt="轮播图片" /></li>
				<li><img src="images/2.jpg" alt="轮播图片" /></li>
				<li><img src="images/3.jpg" alt="轮播图片" /></li>
				<li><img src="images/4.jpg" alt="轮播图片" /></li>
				<li><img src="images/5.jpg" alt="轮播图片" /></li>
				<li><img src="images/6.jpg" alt="轮播图片" /></li>
				<li><img src="images/7.jpg" alt="轮播图片" /></li>
			</ul>
		</div>
		
		<!--第三个轮播图-->
		<div id="slide" class="zy-slide">
			<section class="zy-prev">前一张</section>
			<section class="zy-next">后一张</section>
			<ul>
				<li><img src="images/1.jpg" alt="轮播图片" /></li>
				<li><img src="images/2.jpg" alt="轮播图片" /></li>
				<li><img src="images/3.jpg" alt="轮播图片" /></li>
				<li><img src="images/4.jpg" alt="轮播图片" /></li>
				<li><img src="images/5.jpg" alt="轮播图片" /></li>
				<li><img src="images/6.jpg" alt="轮播图片" /></li>
				<li><img src="images/7.jpg" alt="轮播图片" /></li>
			</ul>
		</div>
		
		<script src="libs/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.zyslide.js" type="text/javascript" charset="utf-8"></script>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
